<template>
  <div class="marketing-page" v-loading="pageLoading" 
       element-loading-text="正在加载数据..." 
       element-loading-background="rgba(13, 14, 26, 0.9)"
       element-loading-svg-view-box="-10, -10, 50, 50"
       :element-loading-svg="loadingSvg">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="logo">
        <div class="logo-icon">
          <el-icon><DataAnalysis /></el-icon>
        </div>
        <div class="logo-text">NEWBE工作室</div>
      </div>
      
      <ul class="nav-items">
        <li class="nav-item">
          <router-link to="/rfm-analysis" class="nav-link">RFM客户行为分析</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/customer-lifecycle" class="nav-link">客户生命周期</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/marketing-analysis" class="nav-link active">营销活动分析</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/sales-prediction" class="nav-link">销售预测</router-link>
        </li>
      </ul>
      
      <div class="user-profile">
        <div class="user-avatar">{{ userInfo?.nickname?.charAt(0)?.toUpperCase() || 'A' }}</div>
      </div>
    </nav>
    
    <!-- 返回按钮 -->
    <div class="back-button-container">
      <el-button 
        class="back-button" 
        type="primary" 
        size="small" 
        @click="goBack"
      >
        <el-icon><Back /></el-icon>
        返回工作台
      </el-button>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="container">
      <!-- 标题和刷新按钮 -->
      <div class="header">
        <h1 class="title">营销活动分析</h1>
        <el-button class="refresh-btn" type="primary" @click="generateAnalysis">
          <el-icon><RefreshRight /></el-icon>
          生成分析
        </el-button>
      </div>
      
      <!-- 数据统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-value">¥150,000</div>
          <div class="stat-label">总投入</div>
          <div class="stat-change positive">
            <el-icon><ArrowUp /></el-icon>
            5.2% 较上期
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Aim /></el-icon>
          </div>
          <div class="stat-value">2.5M</div>
          <div class="stat-label">总触达</div>
          <div class="stat-change positive">
            <el-icon><ArrowUp /></el-icon>
            15% 较上期
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="stat-value">12,500</div>
          <div class="stat-label">转化总数</div>
          <div class="stat-change positive">
            <el-icon><ArrowUp /></el-icon>
            8.0% 较上期
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-value">250%</div>
          <div class="stat-label">平均ROI</div>
          <div class="stat-change negative">
            <el-icon><ArrowDown /></el-icon>
            -2.5% 较上期
          </div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="charts-section">
        <!-- 活动效果概览 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">活动效果概览 (转化数)</h3>
          </div>
          <div class="chart-container" ref="campaignPerformanceChartRef"></div>
        </div>
        
        <!-- 渠道表现分析 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">渠道表现分析 (转化占比)</h3>
          </div>
          <div class="chart-container" ref="channelPerformanceChartRef"></div>
        </div>

        <!-- 营销转化漏斗 -->
        <div class="chart-card full-width">
          <div class="chart-header">
            <h3 class="chart-title">营销转化漏斗</h3>
          </div>
          <div class="chart-container" ref="marketingFunnelChartRef"></div>
        </div>
        
        <!-- 活动成本与回报趋势 -->
        <div class="chart-card full-width">
          <div class="chart-header">
            <h3 class="chart-title">活动成本与回报趋势 (月度)</h3>
          </div>
          <div class="chart-container" ref="costReturnTrendChartRef"></div>
        </div>
      </div>
      
      <!-- 营销活动表格 -->
      <div class="table-section">
        <div class="table-header">
          <h2 class="section-title">营销活动详情</h2>
          <div class="search-box">
            <el-input v-model="searchKeyword" placeholder="搜索活动名称" @input="handleSearch" class="search-input">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
        
        <el-table
          :data="filteredCampaigns"
          style="width: 100%"
          row-key="id"
          border
          :row-class-name="tableRowClassName"
          header-row-class-name="table-header-row"
          header-cell-class-name="table-header-cell"
          cell-class-name="table-cell"
          class="data-table"
          v-loading="tableLoading"
          :header-cell-style="{
            background: 'rgba(42, 42, 87, 0.8)',
            color: '#00c9ff',
            fontWeight: '600'
          }"
          :cell-style="{
            background: '#13142a',
            color: '#e0e0ff',
            borderColor: '#2a2a57'
          }"
          :row-style="{
            background: '#13142a'
          }"
          >
          <el-table-column prop="name" label="活动名称" min-width="180" />
          <el-table-column prop="start_date" label="开始日期" min-width="120" />
          <el-table-column prop="end_date" label="结束日期" min-width="120" />
          <el-table-column prop="budget" label="预算 (¥)" min-width="120">
            <template #default="scope">
              {{ Number(scope.row.budget).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="spent" label="花费 (¥)" min-width="120">
            <template #default="scope">
              {{ Number(scope.row.spent).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="reach" label="触达人数" min-width="130">
            <template #default="scope">
              {{ scope.row.reach }}
            </template>
          </el-table-column>
          <el-table-column prop="clicks" label="点击次数" min-width="120">
            <template #default="scope">
              {{ Number(scope.row.clicks).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="conversions" label="转化数" min-width="120">
            <template #default="scope">
              {{ Number(scope.row.conversions).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="cpa" label="CPA (¥)" min-width="120">
            <template #default="scope">
              {{ Number(scope.row.cpa).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="roi" label="ROI (%)" min-width="120">
            <template #default="scope">
              {{ scope.row.roi }}%
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="120">
            <template #default="scope">
              <el-tag
                :type="getStatusType(scope.row.status)"
                class="status-tag"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCampaigns"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue';
import { ArrowUp, ArrowDown, RefreshRight, Money, Aim, UserFilled, TrendCharts, DataAnalysis, Search, Back } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { useUserStore } from '@/stores/user';

// 获取用户信息
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

// 页面加载状态
const pageLoading = ref(false);
// 加载动画SVG
const loadingSvg = `
  <path class="path" d="
    M 30 15
    L 28 17
    M 25.61 25.61
    A 15 15, 0, 0, 1, 15 30
    A 15 15, 0, 1, 1, 27.99 7.5
    L 15 15
  " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
`;

// 图表引用
const campaignPerformanceChartRef = ref(null);
const channelPerformanceChartRef = ref(null);
const marketingFunnelChartRef = ref(null);
const costReturnTrendChartRef = ref(null);

// 图表实例
let campaignPerformanceChart = null;
let channelPerformanceChart = null;
let marketingFunnelChart = null;
let costReturnTrendChart = null;

// 表格数据和分页
const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(5);
const tableData = ref([
  {
    id: 1,
    name: '双十一大促',
    start_date: '2023-11-01',
    end_date: '2023-11-11',
    budget: 50000,
    spent: 48500,
    reach: '1.2M',
    clicks: 85000,
    conversions: 5200,
    cpa: 9.33,
    roi: 320,
    status: '已完成'
  },
  {
    id: 2,
    name: '新品上市推广',
    start_date: '2023-10-15',
    end_date: '2023-11-15',
    budget: 30000,
    spent: 25000,
    reach: '800K',
    clicks: 40000,
    conversions: 3100,
    cpa: 8.06,
    roi: 280,
    status: '已完成'
  },
  {
    id: 3,
    name: '年中大促预热',
    start_date: '2024-05-20',
    end_date: '2024-06-18',
    budget: 80000,
    spent: 75000,
    reach: '2.0M',
    clicks: 150000,
    conversions: 8500,
    cpa: 8.82,
    roi: 450,
    status: '进行中'
  },
  {
    id: 4,
    name: '圣诞节特别活动',
    start_date: '2023-12-10',
    end_date: '2023-12-25',
    budget: 20000,
    spent: 18000,
    reach: '500K',
    clicks: 25000,
    conversions: 1500,
    cpa: 12.00,
    roi: 180,
    status: '已完成'
  },
  {
    id: 5,
    name: '春季焕新活动',
    start_date: '2024-03-01',
    end_date: '2024-03-31',
    budget: 35000,
    spent: 33000,
    reach: '950K',
    clicks: 60000,
    conversions: 3800,
    cpa: 8.68,
    roi: 310,
    status: '计划中'
  }
]);

// 过滤后的表格数据
const filteredCampaigns = computed(() => {
  if (!searchKeyword.value) {
    return tableData.value;
  }
  return tableData.value.filter(item => {
    return item.name.toLowerCase().includes(searchKeyword.value.toLowerCase());
  });
});

// 根据状态获取tag类型
const getStatusType = (status) => {
  const tagMap = {
    '已完成': 'success',
    '进行中': 'primary',
    '计划中': 'warning'
  };
  return tagMap[status] || 'info';
};

// 页码变更处理
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 表格相关
const tableLoading = ref(false);
const totalCampaigns = computed(() => filteredCampaigns.value.length);

// 处理表格行样式
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
};

// 处理页面大小变更
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
};

// 初始化图表
const initCharts = () => {
  try {
    // 确保DOM元素存在后再初始化
    if (campaignPerformanceChartRef.value) {
      campaignPerformanceChart = echarts.init(campaignPerformanceChartRef.value);
      setCampaignPerformanceChartOption();
    }
    
    if (channelPerformanceChartRef.value) {
      channelPerformanceChart = echarts.init(channelPerformanceChartRef.value);
      setChannelPerformanceChartOption();
    }
    
    if (marketingFunnelChartRef.value) {
      marketingFunnelChart = echarts.init(marketingFunnelChartRef.value);
      setMarketingFunnelChartOption();
    }
    
    if (costReturnTrendChartRef.value) {
      costReturnTrendChart = echarts.init(costReturnTrendChartRef.value);
      setCostReturnTrendChartOption();
    }
  } catch (error) {
    console.error('初始化图表失败:', error);
  }
};

// 活动效果概览图表配置
const setCampaignPerformanceChartOption = () => {
  // 定义柱状图的渐变色数组
  const colorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#3a36db' },
      { offset: 1, color: '#5653ea' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#00c9ff' },
      { offset: 1, color: '#0095bd' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#00ffb3' },
      { offset: 1, color: '#00bd85' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#ffb800' },
      { offset: 1, color: '#d99e00' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#ff6b6b' },
      { offset: 1, color: '#d94e4e' }
    ])
  ];

  const option = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { 
      type: 'category', 
      data: ['双十一大促', '新品上市', '年中预热', '圣诞活动', '春季焕新'],
      axisLabel: { color: '#e0e0ff' },
      axisLine: { lineStyle: { color: '#2a2a57' } }
    },
    yAxis: { 
      type: 'value', 
      name: '转化数',
      axisLabel: { color: '#e0e0ff' },
      axisLine: { lineStyle: { color: '#2a2a57' } },
      splitLine: { lineStyle: { color: 'rgba(42, 42, 87, 0.4)' } }
    },
    series: [{
      name: '转化数',
      type: 'bar',
      data: [
        { value: 5200, itemStyle: { color: colorList[0] } },
        { value: 3100, itemStyle: { color: colorList[1] } },
        { value: 8500, itemStyle: { color: colorList[2] } },
        { value: 1500, itemStyle: { color: colorList[3] } },
        { value: 3800, itemStyle: { color: colorList[4] } }
      ],
      barWidth: '40%',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };
  
  campaignPerformanceChart.setOption(option);
};

// 渠道表现分析图表配置
const setChannelPerformanceChartOption = () => {
  const option = {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
    legend: { 
      orient: 'vertical', 
      right: 10, top: 'center', 
      data: ['社交媒体', '搜索引擎', '邮件营销', '内容营销', '合作伙伴'],
      textStyle: { color: '#e0e0ff' }
    },
    series: [{
      name: '渠道占比',
      type: 'pie',
      radius: ['45%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 10, borderColor: '#13142a', borderWidth: 2 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      data: [
        { value: 335, name: '社交媒体', itemStyle: { color: '#3a36db'} },
        { value: 310, name: '搜索引擎', itemStyle: { color: '#00c9ff'} },
        { value: 234, name: '邮件营销', itemStyle: { color: '#00ffb3'} },
        { value: 135, name: '内容营销', itemStyle: { color: '#ffb800'} },
        { value: 154, name: '合作伙伴', itemStyle: { color: '#ff6b6b'} }
      ]
    }]
  };
  
  channelPerformanceChart.setOption(option);
};

// 营销转化漏斗图表配置
const setMarketingFunnelChartOption = () => {
  const option = {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
    color: ['#3a36db', '#5653ea', '#00c9ff', '#00ffb3', '#ffb800'],
    series: [{
      name: '营销漏斗',
      type: 'funnel',
      left: '10%', top: 60, bottom: 60, width: '80%',
      minSize: '0%', maxSize: '100%',
      sort: 'descending', gap: 2,
      label: { show: true, position: 'inside', color: '#fff' },
      itemStyle: { borderColor: '#13142a', borderWidth: 1 },
      data: [
        { value: 100000, name: '触达 (100k)' },
        { value: 60000, name: '互动 (60k)' },
        { value: 30000, name: '潜在客户 (30k)' },
        { value: 15000, name: '意向客户 (15k)' },
        { value: 5000, name: '成交 (5k)' }
      ]
    }]
  };
  
  marketingFunnelChart.setOption(option);
};

// 活动成本与回报趋势图表配置
const setCostReturnTrendChartOption = () => {
  const option = {
    tooltip: { trigger: 'axis' },
    legend: { 
      data: ['总花费', '总回报'],
      textStyle: { color: '#e0e0ff' } 
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLabel: { color: '#e0e0ff' },
      axisLine: { lineStyle: { color: '#2a2a57' } }
    },
    yAxis: {
      type: 'value',
      name: '金额 (¥)',
      axisLabel: { color: '#e0e0ff', formatter: '¥{value}' },
      axisLine: { lineStyle: { color: '#2a2a57' } },
      splitLine: { lineStyle: { color: 'rgba(42, 42, 87, 0.4)' } }
    },
    series: [
      {
        name: '总花费',
        type: 'line',
        data: [12000, 15000, 13000, 18000, 22000, 20000],
        itemStyle: { color: '#ff6b6b' },
        smooth: true
      },
      {
        name: '总回报',
        type: 'line',
        data: [30000, 38000, 35000, 50000, 60000, 55000],
        itemStyle: { color: '#00ffb3' },
        smooth: true
      }
    ]
  };
  
  costReturnTrendChart.setOption(option);
};

// 处理窗口大小变化
const handleResize = () => {
  try {
    if (campaignPerformanceChart) {
      campaignPerformanceChart.resize();
    }
    
    if (channelPerformanceChart) {
      channelPerformanceChart.resize();
    }
    
    if (marketingFunnelChart) {
      marketingFunnelChart.resize();
    }
    
    if (costReturnTrendChart) {
      costReturnTrendChart.resize();
    }
  } catch (error) {
    console.error('调整图表大小失败:', error);
  }
};

// 生成分析
const generateAnalysis = () => {
  pageLoading.value = true;
  
  // 模拟API请求
  setTimeout(() => {
    try {
      // 重新初始化图表数据
      if (campaignPerformanceChart) {
        setCampaignPerformanceChartOption();
      }
      if (channelPerformanceChart) {
        setChannelPerformanceChartOption();
      }
      if (marketingFunnelChart) {
        setMarketingFunnelChartOption();
      }
      if (costReturnTrendChart) {
        setCostReturnTrendChartOption();
      }
    } catch (error) {
      console.error('生成分析时出错:', error);
    } finally {
      pageLoading.value = false;
    }
  }, 1000);
};

// 返回工作台
function goBack() {
  window.location.href = 'dashboard#/dashboard';
}

// 组件挂载时初始化图表
onMounted(() => {
  // 添加动态样式表
  injectCustomStyles();
  
  // 等待DOM渲染完成
  setTimeout(() => {
    initCharts();
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);
  }, 300);
});

// 组件卸载时清理
onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize);
  
  // 移除动态样式表
  removeCustomStyles();
  
  // 销毁图表实例
  if (campaignPerformanceChart) campaignPerformanceChart.dispose();
  if (channelPerformanceChart) channelPerformanceChart.dispose();
  if (marketingFunnelChart) marketingFunnelChart.dispose();
  if (costReturnTrendChart) costReturnTrendChart.dispose();
});

// 注入自定义样式
const injectCustomStyles = () => {
  // 创建新的style元素
  const styleEl = document.createElement('style');
  styleEl.id = 'marketing-custom-styles';
  
  // 定义强制覆盖的样式
  styleEl.textContent = `
    /* 表格样式强制覆盖 */
    .marketing-page .el-table,
    .marketing-page .el-table__inner-wrapper {
      background-color: #13142a !important;
      color: #e0e0ff !important;
    }
    
    .marketing-page .el-table tr {
      background-color: #13142a !important;
    }
    
    .marketing-page .el-table th.el-table__cell {
      background-color: rgba(42, 42, 87, 0.8) !important;
      color: #00c9ff !important;
      border-bottom-color: #2a2a57 !important;
    }
    
    .marketing-page .el-table td.el-table__cell {
      background-color: #13142a !important;
      color: #e0e0ff !important;
      border-bottom-color: #2a2a57 !important;
    }
    
    .marketing-page .el-table--border .el-table__cell {
      border-right: 1px solid #2a2a57 !important;
    }
    
    .marketing-page .el-table--border:after,
    .marketing-page .el-table--border:before,
    .marketing-page .el-table__inner-wrapper:after,
    .marketing-page .el-table__inner-wrapper:before {
      background-color: #2a2a57 !important;
    }
    
    .marketing-page .el-table tr:hover > td.el-table__cell {
      background-color: #2d2d69 !important;
    }
    
    .marketing-page .el-table__empty-block {
      background-color: #13142a !important;
    }
    
    .marketing-page .el-table__empty-text {
      color: #e0e0ff !important;
    }
    
    /* 分页器样式强制覆盖 */
    .marketing-page .el-pagination button,
    .marketing-page .el-pagination .el-pager li {
      background-color: #13142a !important;
      color: #e0e0ff !important;
      border: 1px solid #2a2a57 !important;
    }
    
    .marketing-page .el-pagination .el-pager li.is-active {
      background: linear-gradient(135deg, #3a36db, #00c9ff) !important;
      color: white !important;
      border-color: transparent !important;
    }
    
    /* 状态标签样式 */
    .marketing-page .el-tag--success {
      background-color: rgba(103, 194, 58, 0.1) !important;
      border-color: #67c23a !important;
      color: #67c23a !important;
    }
    
    .marketing-page .el-tag--info {
      background-color: rgba(144, 147, 153, 0.1) !important;
      border-color: #909399 !important;
      color: #909399 !important;
    }
    
    .marketing-page .el-tag--warning {
      background-color: rgba(230, 162, 60, 0.1) !important;
      border-color: #e6a23c !important;
      color: #e6a23c !important;
    }
    
    .marketing-page .el-tag--danger {
      background-color: rgba(245, 108, 108, 0.1) !important;
      border-color: #f56c6c !important;
      color: #f56c6c !important;
    }

    /* 表格特定样式 */
    .marketing-page .data-table {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      box-shadow: var(--box-shadow);
    }
    
    .marketing-page .even-row {
      background-color: var(--card-bg) !important;
    }
    
    .marketing-page .odd-row {
      background-color: rgba(19, 20, 42, 0.8) !important;
    }
    
    .marketing-page .table-header-row {
      background-color: rgba(42, 42, 87, 0.8) !important;
    }
    
    .marketing-page .table-header-cell {
      font-weight: 600;
      color: var(--secondary-color) !important;
    }
    
    .marketing-page .table-cell {
      transition: all 0.3s ease;
    }
    
    .marketing-page .status-tag {
      padding: 4px 10px;
      border-radius: 12px;
      font-weight: 600;
    }
    
    .marketing-page .section-title {
      font-size: 1.2rem;
      font-weight: 600;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  `;
  
  // 注入到文档头部
  document.head.appendChild(styleEl);
};

// 移除自定义样式
const removeCustomStyles = () => {
  const styleEl = document.getElementById('marketing-custom-styles');
  if (styleEl) {
    document.head.removeChild(styleEl);
  }
};
</script>

<style>
:root {
  --primary-color: #3a36db;
  --secondary-color: #00c9ff;
  --accent-color: #00ffb3;
  --dark-bg: #0a0b1a;
  --card-bg: #13142a;
  --text-color: #e0e0ff;
  --border-color: #2a2a57;
  --hover-color: #2d2d69;
  --gradient-primary: linear-gradient(135deg, #3a36db, #00c9ff);
  --gradient-secondary: linear-gradient(135deg, #00c9ff, #00ffb3);
  --box-shadow: 0 8px 32px rgba(0, 201, 255, 0.1);
}

.marketing-page {
  background-color: var(--dark-bg);
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

/* 导航栏样式 */
.navbar {
  background-color: var(--card-bg);
  padding: 0.8rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
}

.logo-text {
  font-size: 1.2rem;
  font-weight: 600;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-items {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  list-style: none;
  position: relative;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
}

.nav-link.active {
  color: var(--secondary-color);
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-secondary);
  border-radius: 3px;
}

.nav-link:hover {
  color: var(--secondary-color);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-bg);
  font-weight: bold;
}

/* 内容区域样式 */
.container {
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.refresh-btn {
  background: var(--gradient-primary) !important;
  color: white !important;
  border: none !important;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
}

.refresh-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(58, 54, 219, 0.4);
}

/* 数据卡片组 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 201, 255, 0.15);
  border-color: var(--secondary-color);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at top right, rgba(0, 201, 255, 0.1), transparent 70%);
  border-radius: 50%;
}

.stat-icon {
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 1rem;
  background: rgba(58, 54, 219, 0.1);
  color: var(--secondary-color);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: var(--gradient-secondary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 1rem;
  color: rgba(224, 224, 255, 0.8);
}

.stat-change {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.positive {
  color: var(--accent-color);
}

.negative {
  color: #ff6b6b;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.chart-card.full-width {
  grid-column: 1 / -1;
}

.chart-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.chart-container {
  height: 350px;
  width: 100%;
}

/* 表格区域 */
.table-section {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.search-box {
  width: 250px;
}

.search-input :deep(.el-input__wrapper) {
  background-color: rgba(42, 42, 87, 0.4) !important;
  box-shadow: 0 0 0 1px var(--border-color) inset !important;
}

.search-input :deep(.el-input__inner) {
  color: var(--text-color) !important;
  background-color: transparent !important;
}

/* 分页样式 */
.pagination {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

/* 表格样式修改 */
.marketing-page :deep(.el-table),
.marketing-page :deep(.el-table__inner-wrapper) {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.marketing-page :deep(.el-table tr) {
  background-color: var(--card-bg) !important;
}

.marketing-page :deep(.el-table th.el-table__cell) {
  background-color: rgba(42, 42, 87, 0.8) !important;
  color: var(--secondary-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.marketing-page :deep(.el-table td.el-table__cell) {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-bottom-color: var(--border-color) !important;
}

.marketing-page :deep(.el-table--border .el-table__cell) {
  border-right: 1px solid var(--border-color) !important;
}

.marketing-page :deep(.el-table--border:after),
.marketing-page :deep(.el-table--border:before),
.marketing-page :deep(.el-table__inner-wrapper:after),
.marketing-page :deep(.el-table__inner-wrapper:before) {
  background-color: var(--border-color) !important;
}

.marketing-page :deep(.el-table tr:hover > td.el-table__cell) {
  background-color: var(--hover-color) !important;
}

/* 表格空状态样式 */
.marketing-page :deep(.el-table__empty-block) {
  background-color: var(--card-bg) !important;
}

.marketing-page :deep(.el-table__empty-text) {
  color: var(--text-color) !important;
}

/* 自定义Element Plus样式 */
.marketing-page :deep(.el-pagination button),
.marketing-page :deep(.el-pagination .el-pager li) {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

.marketing-page :deep(.el-pagination .el-pager li.is-active) {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

.marketing-page :deep(.el-pagination .el-pager li:hover) {
  color: var(--secondary-color) !important;
}

.marketing-page :deep(.el-pagination .btn-prev),
.marketing-page :deep(.el-pagination .btn-next) {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

.marketing-page :deep(.el-pagination .btn-prev:hover),
.marketing-page :deep(.el-pagination .btn-next:hover) {
  color: var(--secondary-color) !important;
}

.marketing-page :deep(.el-loading-mask) {
  background-color: rgba(10, 11, 26, 0.9) !important;
}

.marketing-page :deep(.el-loading-spinner .path) {
  stroke: var(--secondary-color) !important;
}

.marketing-page :deep(.el-loading-spinner .el-loading-text) {
  color: var(--text-color) !important;
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* 标签样式 */
:deep(.el-tag--success) {
  background-color: rgba(0, 255, 179, 0.15) !important;
  color: var(--accent-color) !important;
  border: none !important;
}

:deep(.el-tag--primary) {
  background-color: rgba(58, 54, 219, 0.15) !important;
  color: var(--primary-color) !important;
  border: none !important;
}

:deep(.el-tag--warning) {
  background-color: rgba(255, 184, 0, 0.15) !important;
  color: #ffb800 !important;
  border: none !important;
}

:deep(.el-tag--danger) {
  background-color: rgba(255, 107, 107, 0.15) !important;
  color: #ff6b6b !important;
  border: none !important;
}

:deep(.el-tag--info) {
  background-color: rgba(0, 201, 255, 0.15) !important;
  color: var(--secondary-color) !important;
  border: none !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .container {
    padding: 1rem;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .search-box {
    width: 100%;
  }
  
  .navbar {
    padding: 0.8rem 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-items {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }
}

/* 输入框和按钮样式 */
.marketing-page :deep(.el-input__wrapper) {
  background-color: rgba(19, 20, 42, 0.8) !important;
  box-shadow: 0 0 0 1px var(--border-color) inset !important;
}

.marketing-page :deep(.el-input__inner) {
  color: var(--text-color) !important;
}

.marketing-page :deep(.el-button) {
  border-color: var(--border-color) !important;
}

.marketing-page :deep(.el-button--primary) {
  background: var(--gradient-primary) !important;
  border: none !important;
}

.marketing-page :deep(.el-button--primary:hover) {
  opacity: 0.9;
}

.marketing-page :deep(.el-button--default) {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.marketing-page :deep(.el-button--default:hover) {
  border-color: var(--secondary-color) !important;
  color: var(--secondary-color) !important;
}

/* 状态标签样式 */
.marketing-page :deep(.el-tag) {
  background-color: transparent !important;
}

.marketing-page :deep(.el-tag--success) {
  color: #67c23a !important;
  border-color: #67c23a !important;
}

.marketing-page :deep(.el-tag--warning) {
  color: #e6a23c !important;
  border-color: #e6a23c !important;
}

.marketing-page :deep(.el-tag--info) {
  color: #909399 !important;
  border-color: #909399 !important;
}

.marketing-page :deep(.el-tag--danger) {
  color: #f56c6c !important;
  border-color: #f56c6c !important;
}

.marketing-page :deep(.el-tag--primary) {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* 卡片样式 */
.back-button-container {
  padding: 12px 24px;
  background-color: var(--card-bg, #13142a);
  border-bottom: 1px solid var(--border-color, #2a2a57);
}

.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #3a36db, #00c9ff);
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(58, 54, 219, 0.3);
}

.back-button:hover {
  box-shadow: 0 4px 12px rgba(58, 54, 219, 0.5);
  transform: translateY(-2px);
}
</style> 